<template>
	<view class="">
		<view class="product_list">
			<ul>
				<li v-for="(item,index) in product" :key="index">
					<image :src="item.pic"></image>
					{{item.title}}
					<view class="product_info_b">
						<view class="product_info_price">
							<text class="price">￥{{item.line_price}}</text>
							<text class="integral_num">{{item.price}}</text>
						</view>
					</view>
					<image class="product_info_add" :src="Url+'mine/index/add.png'"></image>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Url:this.Imgurl,
				product: [{
						pic: '../../static/image/mine/integral/product11.png',
						title: '广西金密桔  约64',
						price: '179.00',
						line_price: '169.00',
					},
					{
						pic: '../../static/image/mine/integral/product12.png',
						title: '广西金密桔  约64',
						price: '129.00',
						line_price: '169.00',
					},
					{
						pic: '../../static/image/mine/integral/product13.png',
						title: '广西金密桔  约64',
						price: '169.00',
						line_price: '169.00',
					},
					{
						pic: '../../static/image/mine/integral/product11.png',
						title: '广西金密桔  约64',
						price: '179.00',
						line_price: '169.00',
					},
					{
						pic: '../../static/image/mine/integral/product12.png',
						title: '广西金密桔  约64',
						price: '129.00',
						line_price: '169.00',
					},
					{
						pic: '../../static/image/mine/integral/product13.png',
						title: '广西金密桔  约64',
						price: '169.00',
						line_price: '169.00',
					}
				]
			}
		},
		methods: {
			toproductdetail(index) {
				this.$emit('toproductdetail', index)
			}
		}
	}
</script>

<style lang="less" scoped>
	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	.product_list {
		width: calc(100% - 30upx);
		margin: auto;
	}

	ul {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		font-size: 26upx;
		margin-bottom: 15upx;

		li {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			border: 1upx solid #000;
			border-radius: 8upx;
			padding: 15upx 2upx;
			margin: 10upx 0;
			width: 31%;

			image {
				width: 150upx;
				height: 150upx;
				margin-bottom: 20upx;
			}

			.product_info_b {
				width: 100%;
				// display: flex;
				// justify-content: space-between;
				margin-top: 40upx;

				.product_info_price {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					margin-left: 10upx;

					.integral_num {
						font-size: 24upx;
						font-weight: bold;
						color: #f73e2f;
						// margin-left: 10upx;
					}

					.price {
						// margin-left: 10upx;
						font-size: 20upx;
						color: #999999;
						text-decoration: line-through;
					}
				}
			}

			.product_info_add {
				position: absolute;
				width: 60upx;
				height: 60upx;
				bottom: -15upx;
				right: 12upx;

			}


		}
	}
</style>
